@model IEnumerable<NorthwindWeb.Models.Order>
<table id="orderGrid"></table>
<div id="orderGridPager"></div>
<div id="orderGridSelectRow" title="Warning" style="display: none">
    <p>
        Please select a(n) Order!
    </p>
</div>

<script type="text/javascript">
    jQuery("#orderGrid").jqGrid({
        url: '@Url.Action("orderGridData")',
        datatype: "json",
        jsonReader: { repeatitems: false, id: "OrderID" },
        colNames: ['OrderID', 'CustomerID', 'EmployeeID', 'OrderDate', 'RequiredDate', 'ShippedDate', 'ShipVia', 'Freight', 'ShipName', 'ShipAddress', 'ShipCity', 'ShipRegion', 'ShipPostalCode', 'ShipCountry'],
        colModel: [
            { name: 'OrderID', editable: true, sortable: false, hidden: true }, 
			{ name: 'CustomerID', editable: true, sortable: false, hidden: false, edittype: 'select', formatter: 'select', editoptions:{value:'@String.Join(";",((IEnumerable<NorthwindWeb.Models.Customer>)ViewBag.PossibleCustomers).Select(x => @String.Format("{0}:{1}", x.CustomerID, x.CompanyName)))'} }, 
			{ name: 'EmployeeID', editable: true, sortable: false, hidden: false, edittype: 'select', formatter: 'select', editoptions:{value:'@String.Join(";",((IEnumerable<NorthwindWeb.Models.Employee>)ViewBag.PossibleEmployees).Select(x => @String.Format("{0}:{1}", x.EmployeeID, x.LastName)))'} }, 
			{ name: 'OrderDate', editable: true, sortable: false, hidden: false, formatter:dateFmatter, editoptions: { dataInit:datePick} }, 
			{ name: 'RequiredDate', editable: true, sortable: false, hidden: false, formatter:dateFmatter, editoptions: { dataInit:datePick} }, 
			{ name: 'ShippedDate', editable: true, sortable: false, hidden: false, formatter:dateFmatter, editoptions: { dataInit:datePick} }, 
			{ name: 'ShipVia', editable: true, sortable: false, hidden: false }, 
			{ name: 'Freight', editable: true, sortable: false, hidden: false }, 
			{ name: 'ShipName', editable: true, sortable: false, hidden: false }, 
			{ name: 'ShipAddress', editable: true, sortable: false, hidden: false }, 
			{ name: 'ShipCity', editable: true, sortable: false, hidden: false }, 
			{ name: 'ShipRegion', editable: true, sortable: false, hidden: false }, 
			{ name: 'ShipPostalCode', editable: true, sortable: false, hidden: false }, 
			{ name: 'ShipCountry', editable: true, sortable: false, hidden: false }			
],
        rowNum: 5,
        pager: '#orderGridPager',
        width: '850',
        height: '15em'
    });

    jQuery("#orderGrid").jqGrid('navGrid', '#orderGridPager',
        { search: false, refresh: false },					   // General options
        { url: '@Url.Action("Edit")', closeAfterEdit: true },  // Edit options
        { url: '@Url.Action("Create")', closeAfterAdd: true }, // Add options
        { url: '@Url.Action("Delete")' }					   // Delete options                           
    );    
	
	function dateFmatter (cellvalue, options, rowObject){ 
    if (cellvalue != null){
        var d =  new Date(parseInt(cellvalue.substr(6))); 
        return 1 + d.getMonth() + '/' + d.getDate() + '/' + d.getFullYear();
    }
    return cellvalue;
	};
	
	function datePick (el){ 
	$(el).datepicker({ dateFormat: 'mm/dd/yy', changeMonth: true, changeYear: true, yearRange: 'c-50:c', showButtonPanel: true,  showAnim: 'slideDown' });
	};
</script>
